<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>过滤器</title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link href="" rel="stylesheet" />
</head>

<body>
    <!-- 
        过滤器：filter
        作用：用于对数据进行处理，比如：数据的格式化
        分为：全局过滤器、局部过滤器
        注意点：
            过滤器在vue2中存在且可以使用的，在vue3中已经废弃了（比如通过方法来进行替代）。
            过滤器本质上来看，也是方法的声明和使用。
            过滤器的方法一定有返回值（一定有return）。
        语法：
            调用时的语法：其语法与传统的方法调用写法不一样
                a. {{str | 过滤器名}}  该写法过滤器方法会有一个唯一形参，形参就是str
                b. {{str | 过滤器(参数1,参数2...)}} 改写法过滤器方法形参会有n+1个，第一个形参为str，第二形参就是参数1....
            对应的声明写法：
                a. 
                    全局：Vue.filter(过滤器名,function(val){return ....})
                    局部：new Vue({.....,filters: {过滤器名: function(val){....},}})
                b. 
                    全局：Vue.filter(过滤器名,function(val,参数1,参数2){return ....})
                    局部：new Vue({.....,filters: {过滤器名: function(val,参数1,参数2){....},}})
        过滤器还支持连续调用，例如：{{str|过滤器1|过滤器2|过滤器3...}}
     -->
    <div id="app">
        <!-- **案例：声明转字母为大写的全局过滤器和转字母为小写的局部过滤器并使用** -->
       <!-- <div>{{str|dx}}</div> -->
        <div>{{str|xx}}</div>
        <!-- 
            示例：在vue3中没有过滤器如何处理数据
         -->
       <!-- <div>{{mxx(str)}}</div> -->
        <!-- 过滤器的连续调用 -->
       <!-- <div>{{str|xx|dx|xx|dx|xx|dx}}</div> -->
    </div>
    <script src="./js/vue.js"></script>
    <script>
        // 全局过滤器
        Vue.filter("dx", function (val) {
            // 此时的str就是当前的形参val
            // 必须要有返回值
            return val.toUpperCase()
        })
        new Vue({
            el: "#app",
            data: {
                str: "IJlkjklGJHTjhgJKLYgjhffglkj"
            },
            // 局部过滤器
            filters: {
                xx: function (val) {
                    return val.toLowerCase()
                }
            },
            // vue3中过滤器的替代方案
            methods: {
                mxx(val) {
                    return val.toLowerCase();
                }
            }
        })
    </script>
</body>

</html>